/*
Account
================================================
Defines the styles for the shopware 5 user account page.

The my-account page displays a dashboard that shows an overview of the user information, payment methods, billing and shipping information inside panel elements.

It allows the user to directly see and change the important information of their account.
*/

.account--content {
	.unitize-margin(10, 0, 0, 0);
}

.partner-statistic .panel--title {
    .unitize(padding-bottom, 20);
}

.account--content,
.payment_logo_debit {
    .clearfix();
}

    // Logout success message
.account--logout {
    .logout--headline {
        .unitize(font-size, 24);
        .unitize-margin(10, 0, 20, 0);
    }

    .logout--actions {
        .unitize(margin-bottom, 10);
    }

    .logout-back-to-shop {
        display: block;
    }
}

.account--menu {
    .link--logout {
        [class^="icon--"] {
            display: none;
        }
    }
}

.account--box {
    .unitize-margin(0, 0, 20, 0);
}

.account--password,
.account--email {
    input[type="text"],
    input[type="password"],
    input[type="email"] {
        width: 100%;
    }
}

    // Account teaser text padding
.account--welcome {
    .unitize(margin-bottom, 20);

    .panel--body {
        padding: 0;
    }

    .panel--title {
        .unitize-padding(20, 0);
        margin: 0;
    }

    .panel--actions {
        padding: 0;
    }
}

    // Account error message margin
.account--error,
.account--success {
    .unitize-margin(0, 0, 10, 0);
}

.register--error-msg {
    color: @highlight-error;
}

.account--actions {
    .unitize-margin(0, 20, 20, 16);
    .clearfix();
}

    // Change Address / Payment method
.account--change-billing,
.account--change-shipping,
.account--change-payment {
    &.register--content {
        display: block;
        width: 100%
    }
}

.account--billing-address,
.account--shipping-address {
    .panel--body {
        .unitize(height, 200)
    }

    .billing--actions,
    .shipping--actions {
        .unitize-padding(20, 0);
    }
}

.account--newsletter fieldset {
    border: 0;
    padding: 0;

    input[type="checkbox"] {
        .unitize-margin(0, 10, 0, 0);
    }
}

    // Select Address
.account--addresses-content,
.account--addresses-container {
    .clearfix();
}

.account--addresses {
    .clearfix();
    width: 100%;
}

.address--container {
    width: 100%;
    padding: 2% 0 0 0;
}

.account--paging {
    .clearfix();
    .unitize-padding(10, 10);
    display: block;
    background: lighten(@panel-bg, 4%);

    .paging--display {
        float: right;
    }
}

.account--orders-overview {
    border: 1px solid @panel-border;

	p { .unitize(font-size, 14); }

    .orders--table-header {
        display: none;
        background: @panel-table-header-bg;

        .panel--th {
            color: @panel-table-header-color;
        }
    }

    .panel--tr {
        .unitize-padding(10, 0);
    }

    .panel--td {
        .clearfix();
        .unitize-padding(5, 10);
        display: block;
        float: none;
    }

    .column--info-labels,
    .column--info-data {
        display: none;
    }

    .column--summary-labels,
    .column--summary-data {
        width: 50%;
        float: left;
        text-align: left;
    }

    .column--summary-data {
        .unitize-padding(5, 10, 0, 0);
    }

    .column--label,
    .column--value {
        width: 50%;
        float: left;
    }

    .column--label {
        font-weight: 600;
    }
}

.is--act-partnerStatistic {
    .content-main--inner {
        .unitize-padding(0, 0, 16, 0);
    }

    .account--welcome {
        .unitize-padding(0, 0, 0, 10);
    }

    .listing--actions {
        .unitize-padding(10, 18, 24, 18);
        border-bottom: 1px solid @border-color;
    }

    .date-filter {
        .unitize(font-size, 14);
        .unitize-height(50);
        display: block;
        width: 100%;
    }

    .date-filter--label {
        .unitize-padding(9, 0, 10, 0);
        .unitize-width(40);
        display: block;
        float: left;
    }

    .date-filter--input {
        .unitize-margin(0, 0, 0, 40);
        width: auto;
    }

    .datepicker {
        .unitize(padding-right, 35);
        width: 100%;
        float: left;
    }

    .ui-datepicker-trigger {
        .unitize-width(20);
        .unitize-height(20);
        .unitize-margin(10, 0, 0, -30);
        display: inline;
        border: 0;
        background: transparent;
        text-align: center;
        color: @text-color;
        padding: 0;
    }

    .btn--filter {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .chart--holder {
        display: none;
    }

    .panel--th,
    .panel--td {
        .unitize-padding(8, 10, 7, 10);
        width:25%;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:first-child {
            text-align: left;
        }
    }

    .panel--th {
        .unitize-padding(3, 10, 2, 10);
        .unitize(font-size, 12);
        color: @text-color;
    }

    .is--odd {
        .unitize-padding(0, 0, 9, 0);
        border-bottom: 1px solid @border-color;

        .column--price,
        .column--total {
            .unitize-padding(10, 10, 10, 10);
            width:100%;
        }
    }

    .column--label {
        text-align: left;
    }

    .column--value {
        text-align: right;
    }

    .column--label,
    .column--value {
        width: 50%;
        float: left;
    }

    .column--item-sum {
        .column--label {
            .is--block;
        }
    }
}

.order--status-icon {
    .unitize-width(8);
    .unitize-height(8);
    .unitize(top, 8);
    display: inline-block;
    position: relative;
    
    &.status--0,  //The order has not been processed yet.
    &.status--1,  //The order is in process
    &.status--3,  //Partially completed
    &.status--6 { //The order has been sent in part
        background: @highlight-info;
    }
    
    &.status--2,  //Completed
    &.status--5,  //Ready for shipping
    &.status--7 { //The order has been sent
        background: @highlight-success;
    }
    
    &.status--4,  //The order has been cancelled
    &.status--8 { //Clarification needed
        background: @highlight-error;
    }
}

.order--name {
    color: @text-color-dark;
}

.order--details,
.order--price-unit,
.order--current-price {
    display: none;
}

.order--details .panel--tr {
    border-bottom: 1px solid @panel-border;
}

.order--repeat {
    text-align: center;
    background: @gray;
    border-bottom: 1px solid @border-color;
}

.order--actions {
    .is--align-center;
}

.order--user-comments,
.order--shop-comments {
    border-bottom: 1px solid @border-color;
}

.account--downloads {
    border: 1px solid @panel-border;

    p { .unitize(font-size, 14) }

    .downloads--table-header {
        display: none;
    }

    .panel--tr {
        .unitize-padding(10, 0);
    }

    .panel--td {
        .clearfix();
        .unitize-padding(5, 10);
        display: block;
        float: none;
    }
}

.account--password-reset {
    .unitize(margin-top, 10);

    p { margin: 0; }

    .password-reset--input {
        .unitize-margin(0, 0, 30, 0);
        width: 100%;
    }

    .password-reset--link {
        width: 100%;
        margin: 0;

        &:first-child {
            .unitize-margin(0, 0, 10, 0);
        }
    }
}

@media screen and(min-width: @phoneLandscapeViewportWidth ) {
    .account--password-reset {
        .unitize(margin-top, 10);

        .password-reset--input {
            .unitize-margin(10, 0, 30, 0);
        }

        .password-reset--link {
            .unitize-margin(0, 0, 10, 0);
            width: auto;

            &:first-child {
                .unitize-margin(0, 10, 0, 0);
            }
        }
    }

    .account--logout .logout-back-to-shop {
        display: inline-block;
    }
}

@media screen and(min-width: @tabletViewportWidth) {

    .account--content {
		.unitize-margin(30, 0, 0, 0);

		&.is--wide {
			width: 100%;
		}
    }

    .account--password-reset {
        .unitize-margin(20, 0, 0, 0);
    }

    .account--menu {
        border: 1px solid @border-color;

        .navigation--headline {
            .panel--title;
            .is--underline;
            border-bottom: 1px solid @border-color;
        }

        .account--menu-container {
            .panel--body;
            .unitize-padding(10, 20);
        }

        .navigation--list {
            padding: 0;
            border: 0 none;
        }

        .navigation--entry {
            margin: 0;
            border: 0 none;
        }

        .navigation--link {
            .unitize-padding(5, 0);

            &.link--logout {
                .unitize-margin(10, 0, 0, 0);
                .unitize-padding(10, 0, 0, 0);
                border-top: 1px solid @border-color;
                font-weight: bold;
                color: @brand-primary;

                [class^="icon--"] {
                    .unitize-margin(0, 5, 0, 0);
                    display: inline-block;
                }

            }
        }
    }

    .account--welcome {
        .panel--title {
            .unitize(@font-size-h1, 16, font-size);
        }
    }

    // Select Address
    .address--container {
        width: 50%;
        float: left;
        padding: 2% 0 0 2%;
    }

    .account--orders-overview {
        .orders--table-header {
            display: block;
        }

        .panel--tr {
            padding: 0;
            border-width: 0 0 1px 0;

            &.order--repeat {
                .unitize-padding(20, 20);
            }
        }
        .panel--td {
            .unitize-padding(10, 10);
            display: inline-block;
            float: left;
        }

        .column--label {
            display: none;
        }

        .column--value {
            width: 100%;
            float: none;
        }

        .column--summary-labels,
        .column--summary-data {
            width: 20%;
            text-align: right;
        }

        .column--date,
        .column--id,
        .column--dispatch {
            width: 20%;
        }
        .column--status {
            width: 25%;
        }
        .column--actions {
            width: 15%;

            .btn {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
        }
        .column--name {
            width: 50%;
        }
        .column--quantity {
            width: 10%;
        }
        .column--price {
            width: 20%;
        }
        .column--total {
            width: 20%;
        }
        .column--info-labels {
            width: 20%;
        }
        .column--info-data {
            width: 40%;
        }
    }

    .order--item {
        margin: 0;
    }

    .order--pseudo-price {
        .unitize(font-size, 12);
    }

    .order--download,
    .order--price-unit,
    .order--current-price {
        .is--block;
    }

    .order--download {
        .unitize-margin(10, 0, 0, 0);
    }

    .order--quantity {
        .is--align-center;
    }

    .order--actions,
    .order--price,
    .order--amount {
        .is--align-right;
    }

    .account--downloads {
        .downloads--table-header {
            .is--block;
            background: @panel-table-header-bg;

            .panel--th {
                color: @panel-table-header-color;
            }
        }

        .panel--tr {
            padding: 0;
            border-width: 0 0 1px 0;
        }
        .panel--td {
            .unitize-padding(10, 10);
            display: inline-block;
            float: left;
        }

        .column--date,
        .column--actions {
            width: 20%;
        }
        .column--info {
            width: 60%;
        }
    }

    .column--label {
        display: none;
    }

    .column--date,
    .column--id,
    .column--dispatch {
        width: 20%;
    }

    .column--status {
        width: 25%;
    }

    .column--actions {
        width: 15%;
    }

    .column--name {
        width: 50%;
    }

    .column--quantity {
        width: 10%;
    }

    .column--price {
        width: 20%;
    }

    .column--total {
        width: 20%;
    }

    .column--info-labels {
        width: 20%;
    }

    .column--info-data {
        width: 40%;
    }

    .column--summary {
        width: 20%;
    }

    .account--password-reset {
        .password-reset--input {
            .unitize-width(320);
        }
    }

    // Account error message margin
    .account--error,
    .account--success {
        .unitize-margin(0, 0, 20, 0);
    }

    .is--act-partnerStatistic {
        .content-main--inner {
            .unitize-padding(0, 20, 16, 20);
        }

        .account--welcome {
            .unitize-padding(0, 0, 0, 0);
        }

        .listing--actions {
            .unitize-padding(10, 10, 10, 10);
            .border-radius();
            border: 1px solid @border-color;
            background: @gray-light;
        }

        .date-filter {
            .unitize-padding(0, 10, 0, 10);
            width: 40%;
            float: left;
            height: auto;
        }

        .date-filter--label {
            width:10%;
        }

        .btn--filter {
            width: 20%;
            float: left;
            height:40px;
        }

        .chart--holder {
            .is--align-center;
            .is--block;
            width: 100%;
        }

        .panel--th,
        .panel--td {
            .unitize-padding(10, 10, 10, 10);
        }

        .column--item-sum {
            width: 75% !important;

            .column--label,
            .column--value {
                float: left;
                width: 50%;
            }
        }

        .is--odd {
            border: 0;
            padding: 0;
        }

        .is--odd .column--total {
            width: 25%;
            float: left !important;

            .column--value {
                width:100%;
            }
        }
    }

    .account--addresses-container {
        margin: -2% 0 0 -2%;
    }
}

@media screen and(min-width: @tabletLandscapeViewportWidth) {

	.account--info,
	.account--billing {
		width: 49%;
		float: left;
	}

	.account--payment,
	.account--shipping {
		width: 49%;
		float: right;
	}

	.account--email,
	.account--password {
		display: none;
	}

	.account--email,
	.account--password,
	.account--newsletter {
		clear: both;
	}

    .account--password-reset {
        .unitize-margin(20, 0, 0, 0);
    }

	.account--info,
	.account--payment {
		.panel--body {
			.unitize-height(120);
		}
	}

	.account--billing,
	.account--shipping {
		.panel--body {
			.unitize-height(220);
		}
	}
}

@media screen and(min-width: @desktopViewportWidth) {

    .is--act-partnerStatistic {
        .content-main--inner {
            .unitize-padding(0, 45, 45, 45);
        }
    }

    .account--content {
        .unitize-margin(45, 0, 0, 0);
    }

    .account--password-reset {
        .unitize-margin(45, 0, 0, 0);
    }

    // Account error message margin
    .account--error,
    .account--success {
        .unitize-margin(0, 0, 20, 0);
    }
}